﻿<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Controls="clr-namespace:MahApps.Metro.Controls"
                    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                    xmlns:Actions="clr-namespace:MahApps.Metro.Actions">

    <DataTemplate x:Key="HeaderTemplate">
        <StackPanel Orientation="Horizontal" Margin="10" >
            <Button x:Name="nav" Foreground="White" Style="{DynamicResource MetroCircleButtonStyle}" Height="40" Width="40" FontFamily="Segoe UI Symbol" FontSize="16" VerticalAlignment="Top" >
                <Button.Resources>
                    <SolidColorBrush x:Key="BlackBrush" Color="White" />
                </Button.Resources>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <Actions:SetFlyoutOpenAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}" Value="False" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Rectangle Width="20" Height="15">
                    <Rectangle.Fill>
                        <VisualBrush Stretch="Fill">
                            <VisualBrush.Visual>
                                <Canvas Clip="F1M0,0L48,0 48,48 0,48 0,0" Height="40" Width="48" >
                                    <Path Data="F1M36,22L36,26 19.75,26 27,33 20.5,33 11,24 20.5,15 27,15 19.75,22 36,22z" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Height="18" Canvas.Left="11" Stretch="Fill" Canvas.Top="15" Width="25" />
                                </Canvas>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Button>
            <TextBlock Text="{Binding}" x:Name="PART_BackButton" FontSize="20" Margin="15,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}" Value="Right">
                <Setter TargetName="nav" Property="Content">
                    <Setter.Value>
                        <Rectangle Width="20" Height="15" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="-180"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                            <Rectangle.Fill>
                                <VisualBrush Stretch="Fill">
                                    <VisualBrush.Visual>
                                        <Canvas Clip="F1M0,0L48,0 48,48 0,48 0,0" Height="40" Width="48" >
                                            <Path Data="F1M36,22L36,26 19.75,26 27,33 20.5,33 11,24 20.5,15 27,15 19.75,22 36,22z" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Height="18" Canvas.Left="11" Stretch="Fill" Canvas.Top="15" Width="25" />
                                        </Canvas>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>

    <Style TargetType="{x:Type Controls:Flyout}">
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="HeaderTemplate" Value="{StaticResource HeaderTemplate}" />
        <Setter Property="Background" Value="#FF252525" />
        <Setter Property="Foreground" Value="#FFFFFFFF" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Controls:Flyout}">
                    <Grid x:Name="root" Background="{TemplateBinding Background}" HorizontalAlignment="Left">
                        <Grid.RenderTransform>
                            <TranslateTransform />
                        </Grid.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState x:Name="Default"/>
                                <VisualState x:Name="Hide">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="root">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.500" Value="1" x:Name="hideFrame">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Show">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="root">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.600" Value="1" x:Name="showFrame" >
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut" />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <StackPanel>
                            <ContentPresenter x:Name="PART_Header" ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                            <ContentPresenter x:Name="PART_Content"/>
                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>